<template>
  <div>
    <d2-crud
      :columns="columns"
      :data="data"
      index-row
      :loading="loading"
      :loading-options="loadingOptions"
      :pagination="pagination"
      :options="options"
      :rowHandle="rowHandle"
      selection-row
      @row-click="rowClick"
      @selection-change="selectChange"
      @process-start="startWork"
      @process-img="processImg"
      @pagination-current-change="paginationCurrentChange"
      ref="d2Crud">
      <div class="title" slot="header">
        <span class="text">流程列表</span>
        <head-btns @del="del"/>
      </div>
    </d2-crud>
    <!--查看流程图弹窗 -->
    <el-dialog
      title="流程图"
      :visible.sync="dialogVisible"
      width="50%">
      <div class="imageArea">
        <img :src="imgUrl">
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="启动流程"
      :visible.sync="dialogProcessStart"
      width="30%">
      <el-form label-position="right" label-width="80px"> <!-- 动态渲染表单-->
        <el-form-item v-for="(item, index) in formData" :key="index" :label="item.name">
          <el-date-picker
            v-model="item.value"
            align="right"
            type="date"
            placeholder="选择日期" v-if="item.type == 'date'">
          </el-date-picker>
          <el-input v-model="item.value" v-else-if="item.type == 'string'"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">提 交</el-button>
        <el-button @click="dialogProcessStart = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

  import zhzfUtils from '@/assets/utils/zhzf-util'
  import workflowApi from '@/api/system/workflow';
  import menuApi from '@/api/system/menu'
  import HeadBtns from "@/views/comps/zhzf/head-btns";
  export default {
    components: {HeadBtns},
    data() {
      return {
        columns: [
          {title: '类别', key: 'category'},
          {title: '名称', key: 'name'},
          {title: '版本', key: 'version'},
          {title: '创建人', key: 'creator'},
          {
            title: '创建时间', key: 'createTime', formatter: (row, col, val) => {
              return zhzfUtils.formatDts(val, 'YYYY-MM-DD HH:mm:ss')
            }
          },
          {
            title: '修改时间', key: 'lastUpdateTime', formatter: (row, col, val) => {
              return zhzfUtils.formatDts(val, 'YYYY-MM-DD HH:mm:ss')
            }
          },
        ],
        data: [],
        loading: false,
        loadingOptions: {
          text: '正在加载数据',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.8)'
        },
        options: {
          stripe: true
        },
        rowHandle: {
          custom: [
            {title: '启动', size: 'mini', icon: "el-icon-video-play", emit: 'process-start', style: "color:#409eff;"},
            {title: '流程图', size: 'mini', icon: "el-icon-view", emit: 'process-img', style: "color:#67c23a;"},
          ]
        },
        pagination: {
          currentPage: 1,
          pageSize: 15,
          total: 0
        },
        selected: [],
        dialogVisible: false,
        dialogProcessStart: false,
        imgUrl: null,
        processDefinitionId: null,
        formData: null
      }
    },
    mounted() {
      this.fetchData()
    },
    methods: {
      rowClick(row) {
        this.$refs.d2Crud.$children[1].toggleRowSelection(row);
      },
      selectChange(selection) {
        this.selected = selection;
      },
      async startWork({row}) {   //启动流程
        window.event.stopPropagation(); //阻止冒泡
        this.dialogProcessStart = true;
        this.processDefinitionId = row.id;
        let resp = await workflowApi.startForm({id: row.id});
        if (resp) {
          this.formData = resp.data;
        }
      },
      dataIntegration(data) {   //数据转换
        var result = {};
        for (let i = 0; i < data.length; i++) {
          result[data[i].id] = data[i].value;
        }
        return result;
      },
      async submit() {   //提交
        var vars = this.dataIntegration(this.formData);
        let resp = await workflowApi.startWork({processDefinitionId: this.processDefinitionId, vars: vars}); //提交数据
        if (resp) {
          let ok = resp.ok;
          this.dialogProcessStart = false;
          this.$notify({title: '操作提示', message: ok ? '流程启动成功' : '流程启动失败', type: ok ? 'success' : 'error'});
        }
      },
      async processImg({row}) {  //查看流程图
        window.event.stopPropagation(); //阻止冒泡
        this.dialogVisible = true;
        let dts = Date.now() //给时间戳
        this.imgUrl = process.env.VUE_APP_API + "/api/activiti/traffic/deploy/image/" + row.id + "?dts=" + dts
      },
      del(){
        this.$confirm('确定要删除选择的数据项？')
          .then(async res => {
            if (res == 'confirm') {
              let ids = [];
              for (let i = 0; i < this.selected.length; i++) {
                let item = this.selected[i];
                ids.push(item.deploymentId);
              }
              await workflowApi.deployDel(ids);
              this.$notify({title: '操作提示', message: '操作成功', type: 'success'});
              await this.fetchData();
            }
          })
      },
      paginationCurrentChange(currentPage) {
        this.pagination.currentPage = currentPage;
        this.fetchData();
      },
      async fetchData() {
        this.loading = true;
        let res = await workflowApi.processPage(this.pagination);
        this.data = res.data.rows;
        this.pagination.total = res.data.total || this.data.length;
        this.loading = false
      }
    }
  }
</script>
<style lang="scss">
  .el-dialog__body {
    img {
      // margin:0 auto;
      width: 100%;
      height: 100%;
    }
  }
</style>

